<script>
import { addCamera, monitorCameraDetails, editMonitorCamera } from '@/api/cameraManagement/cameraManagement'
export default {
  name: 'AddUpdateCameraDialog',
  data() {
    return {
      dialogFormVisible: false,
      ruleForm: {
        baseName: '',
        domain: '',
        appName: '',
        streamName: '',
        baseParentId: ''
      },
      rules: {
        baseName: [{ required: true, message: '请输入摄像头名称', trigger: 'blur' }],
        domain: [{ required: true, message: '请输入播流域名', trigger: 'blur' }],
        appName: [{ required: true, message: '请输入appName', trigger: 'blur' }],
        streamName: [{ required: true, message: '请输入streamName', trigger: 'blur' }]
      }
    }
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    baseId: {
      type: [Number, String],
      default: ''
    },
    areaDetail: {
      type: Object,
      default: ''
    },
  },
  watch: {
    visible(val) {
      this.dialogFormVisible = val
      if (val && this.areaDetail && typeof this.areaDetail === 'object') {
        this.ruleForm.baseParentId = this.areaDetail.id || ''
      } else if (val) {
        this.ruleForm.baseParentId = ''
      }
    },
    dialogFormVisible(val) {
      this.$emit('update:visible', val)
    },
    areaDetail(val) {
      if (val && typeof val === 'object') {
        this.ruleForm.baseParentId = val.id || ''
      } else {
        this.ruleForm.baseParentId = ''
        this.ruleForm.areaLabel = ''
      }
    },
    title: {
      handler(val) {
        if (val && val.indexOf('编辑') !== -1) {
          this.getDetail()
        }
      }
    },
    baseId(val) {
      this.baseId = val
    },
  },
  methods: {
    //获取详情
    async getDetail() {
      try {
        const res = await monitorCameraDetails(this.baseId)
        if (res && res.code === 200 && res.data) {
          this.ruleForm = {
            ...this.ruleForm,
            ...res.data
          }
        }
      } catch (e) {
        console.error(e)
      }
    },
    resetForm() {
      this.$nextTick(() => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields()
        }
      })
    },
    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.baseId) {
            if (this.ruleForm.createTime && this.ruleForm.createTime.length === 10) {
              this.ruleForm.createTime = this.ruleForm.createTime + 'T00:00:00'
            }
            if (this.ruleForm.updateTime && this.ruleForm.updateTime.length === 10) {
              this.ruleForm.updateTime = this.ruleForm.updateTime + 'T00:00:00'
            }
            let obj = {
              ...this.ruleForm,
              baseId: this.baseId,
            }
            editMonitorCamera(obj).then(res => {
              if (res) {
                this.$message.success('修改成功')
                this.handleClose()
              }
            })
          } else {
            console.log('this.ruleForm', this.ruleForm)
            addCamera(this.ruleForm).then((res) => {
              if (res) {
                this.$message.success('新增成功')
                this.handleClose()
              }
            })
          }
        }
      })
    },
    handleClose() {
      this.$emit('closeDialog')
      this.resetForm()
    }
  }
}
</script>

<template>
  <div class="camera-form">
    <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="handleClose" :close-on-click-modal="false"
      :close-on-press-escape="false">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
        <!--        <h3 style="margin-bottom: 10px">基础信息</h3>-->
        <!--        <el-row :gutter="20">-->
        <!--          <el-col :span="12">-->
        <!--            <el-form-item label="摄像头名称" prop="baseName">-->
        <!--              <el-input v-model="ruleForm.baseName" />-->
        <!--            </el-form-item>-->
        <!--            <el-form-item label="设备型号" prop="deviceType">-->
        <!--              <el-input v-model="ruleForm.deviceType" />-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--          <el-col :span="12">-->
        <!--            <el-form-item label="设备ID/序列号" prop="deviceId">-->
        <!--              <el-input v-model="ruleForm.deviceId" />-->
        <!--            </el-form-item>-->
        <!--            <el-form-item label="安装位置" prop="areaId">-->
        <!--              <el-input v-model="ruleForm.areaLabel" disabled/>-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--        </el-row>-->
        <!--        <h3 style="margin-bottom: 10px">网络信息</h3>-->
        <!--        <el-row :gutter="20">-->
        <!--          <el-col :span="12">-->
        <!--            <el-form-item label="IP地址" prop="ipAddr">-->
        <!--              <el-input v-model="ruleForm.ipAddr" />-->
        <!--            </el-form-item>-->
        <!--            <el-form-item label="访问密码" prop="accessPassword">-->
        <!--              <el-input v-model="ruleForm.accessPassword" />-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--          <el-col :span="12">-->
        <!--            <el-form-item label="访问端口号" prop="accessPort">-->
        <!--              <el-input v-model="ruleForm.accessPort" />-->
        <!--            </el-form-item>-->
        <!--            <el-form-item label="传输协议" prop="transferProtocol">-->
        <!--              <el-input v-model="ruleForm.transferProtocol" />-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--        </el-row>-->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="摄像头名称" prop="baseName">
              <el-input v-model="ruleForm.baseName" />
            </el-form-item>
            <el-form-item label="播流域名" prop="domain">
              <el-input v-model="ruleForm.domain" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="appName" prop="appName">
              <el-input v-model="ruleForm.appName" />
            </el-form-item>
            <el-form-item label="streamName" prop="streamName">
              <el-input v-model="ruleForm.streamName" />
            </el-form-item>

          </el-col>
        </el-row>
        <div style="text-align:center;margin-top:32px;">
          <el-button type="primary" @click="handleClose">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<style lang="scss">
.camera-form {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 0;
}
</style>
